<template>
  <div class="list">
    <div class="list-content">
      <template v-for="(item,index) in chartData.rows">
        <ul :key="index" v-if="index === 0" :class="chartData.columns.length > 12 ?'': 'left-Name'">
          <template v-for="(el,key) in chartSettings.labelMap">
            <li :key="key + index" v-if="chartData.columns.indexOf(key) !== -1">
              <span>{{el}}</span>
            </li>
          </template>
        </ul>
        <ul :key="index +'1'" :class="index === 0 && chartData.columns.length < 12?'left':''">
          <template v-for="(el,key) in chartSettings.labelMap">
            <li :key="key+ index + '1'" v-if="chartData.columns.indexOf(key) !== -1">
              <span>{{item[key]}}</span>
            </li>
          </template>
        </ul>
      </template>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    chartData: {
      type: Object
    },
    chartSettings: {
      type: Object
    }
  }
};
</script>
<style lang="scss" scoped>
.list {
  margin-top: 15px;
  overflow-x: scroll; // 子元素的宽度大于父元素的即可滚动
  border-radius: 4px;
  max-height: 320px;
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    height: 10px;
    width: 10px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 81, 255, 0.2);
    background: #409eff;
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 81, 255, 0.2);
    border-radius: 10px;
    background: #ededed;
  }

  .list-content {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    float: left; // 使其脱离文档流 宽度为所有字元素的和
    min-width: 100%;
    ul {
      width: 120px;
      flex: 3;
      padding: 0;
      margin: 0;
      li {
        display: block;
        line-height: 24px;
        font-size: 12px;
        color: #333333;
        border-bottom: 1px solid #eeeeee;
      }
    }
    .left {
      margin-left: 120px;
    }
    .left-Name {
      position: absolute;
      background: #ffffff;
    }
  }
}
</style>